@import "../imports/mixins";

.jw-skin-vapor {
		@active-color: #fff;
    @inactive-color: rgba(0, 0, 0, 0.5);
   	@hover-color: @active-color;

    @display-icon-color: rgba(255, 255, 255, 0.5);
    @display-icon-hover-color: @progress-color;
    @display-bkgd-color: @inactive-color;
    @display-bkgd-hover-color: #000;

    @controlbar-background: @rail-color;
		@progress-color: #0f9e60;
    @buffer-color: @inactive-color;
    @rail-color: rgba(255, 255, 255, 0.4);
    @thumb-color: @progress-color;

    @controlbar-height: 2em;
    @rail-height: 2em;
    @cue-size: .66em;
    @def-rail-width: 0.5em;

    @volume-background: #333;

    @controlbar-height: 2em;

    @nextup-border-radius: @ui-padding / 2;
    @nextup-header-background: fade(mix(white, black, 50%), 90%);
    @nextup-body-background: darken(@nextup-header-background, 20%);
    @nextup-body-text-color-overflow: darken(mix(white, black, 50%), 20%);

    #namespace > .controlbar-height();
    #namespace > .basic-skin-styles(); // Using the above local variables
		#namespace > .touch-flag-skin-styles(); // Using the above local variables
    #namespace > .set-global-color-classes();

    .skin-element-padding();

    /* For the overlay containers */
    .jw-time-tip,
    .jw-volume-tip,
    .jw-menu {
        border-radius: @ui-padding;
        bottom: .3em;
    }

    .jw-skip {
        border-radius: @ui-padding;
    }

    /* Styles for menu list items */
    .jw-option {
        color: @active-color;

        &:hover,
        &.jw-active-option {
            color: @progress-color;
        }
    }

    /* Playlist title */
    .jw-tooltip-title {
        border-bottom: 1px solid #000;
        background-color: #1E1E1E;
    }

    /* Horizontal (timeline & horz volume) slider */
	.jw-slider-horizontal {
		.jw-knob,
		.jw-cue {
			height: 2em;
		}

		.jw-knob {
			margin-left: 0;
            background-color: #fff;
            width: .2em;
            .vertically-centered-rail-element(@rail-height, 2em);
		}

		.jw-cue {
			.vertically-centered-rail-element(2em, @cue-size);
                background: @display-icon-color;
                height: @cue-size;
		}
	}

    /* Volume slider */
	.jw-slider-vertical {
		padding: .4em;
		bottom: 3px;
		border-radius: 2px;
		border: 0;
        background-color: #333333;

        .jw-knob {
            display: none;
        }

		.jw-rail {
			background-color: rgba(0, 0, 0, 0.8);
		}

		.jw-rail,
		.jw-progress {
			border: 1px solid #000;
		}

	}

    /* Toggle icons */
    .jw-icon-cc {
        &.jw-off:before {
            content: "\e604";
        }
    }

    .jw-icon-hd {
        &.jw-off:before {
            content: "\e609";
        }
    }

    /* Audio player only */
    &.jw-flag-audio-player {
        .jw-controlbar {
            background: @inactive-color;
        }
      .jw-controlbar-center-group {
        padding-bottom: 0;
      }
    }

  .jw-icon-inline,
  .jw-icon-tooltip,
  .jw-slider-horizontal,
  .jw-text-elapsed,
  .jw-text-duration {
      height: @controlbar-height;
      line-height: @controlbar-height;
  }

}
